import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  Platform
} from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { BlurView } from 'expo-blur';
import { useAuth } from '../contexts/AuthContext';
import { authAPI } from '../utils/api';
import { theme } from '../styles/theme';

const LoginScreen = ({ navigation }) => {
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const { login } = useAuth();

  const handleLogin = async () => {
    if (!phone || !password) {
      Alert.alert('提示', '请输入手机号和密码');
      return;
    }

    setLoading(true);
    try {
      const response = await authAPI.login({ phone, password });
      if (response.success) {
        await login(response.data.user, response.data.token);
      }
    } catch (error) {
      Alert.alert('登录失败', error.response?.data?.message || '请检查网络连接');
    } finally {
      setLoading(false);
    }
  };

  return (
    <LinearGradient
      colors={['#000000', '#1a1a1a', '#000000']}
      style={styles.container}
    >
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.keyboardView}
      >
        <View style={styles.content}>
          {/* Logo区域 */}
          <View style={styles.logoContainer}>
            <LinearGradient
              colors={theme.gradients.gold}
              style={styles.logoGradient}
            >
              <Text style={styles.logoText}>酒吧</Text>
            </LinearGradient>
            <Text style={styles.subtitle}>BAR MANAGEMENT</Text>
          </View>

          {/* 登录表单 */}
          <BlurView intensity={20} tint="dark" style={styles.formContainer}>
            <View style={styles.form}>
              <Text style={styles.title}>登录</Text>
              
              <View style={styles.inputContainer}>
                <TextInput
                  style={styles.input}
                  placeholder="手机号"
                  placeholderTextColor={theme.colors.textDim}
                  value={phone}
                  onChangeText={setPhone}
                  keyboardType="phone-pad"
                  autoCapitalize="none"
                />
              </View>

              <View style={styles.inputContainer}>
                <TextInput
                  style={styles.input}
                  placeholder="密码"
                  placeholderTextColor={theme.colors.textDim}
                  value={password}
                  onChangeText={setPassword}
                  secureTextEntry
                />
              </View>

              <TouchableOpacity
                style={[styles.button, loading && styles.buttonDisabled]}
                onPress={handleLogin}
                disabled={loading}
              >
                <LinearGradient
                  colors={theme.gradients.gold}
                  style={styles.buttonGradient}
                  start={{ x: 0, y: 0 }}
                  end={{ x: 1, y: 0 }}
                >
                  <Text style={styles.buttonText}>
                    {loading ? '登录中...' : '登录'}
                  </Text>
                </LinearGradient>
              </TouchableOpacity>

              <TouchableOpacity
                style={styles.registerLink}
                onPress={() => navigation.navigate('Register')}
              >
                <Text style={styles.registerText}>没有账号？立即注册</Text>
              </TouchableOpacity>
            </View>
          </BlurView>

          {/* 装饰线条 */}
          <View style={styles.decorLine} />
          <View style={[styles.decorLine, styles.decorLine2]} />
        </View>
      </KeyboardAvoidingView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  keyboardView: {
    flex: 1
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    padding: theme.spacing.lg
  },
  logoContainer: {
    alignItems: 'center',
    marginBottom: theme.spacing.xxl
  },
  logoGradient: {
    width: 100,
    height: 100,
    borderRadius: theme.borderRadius.xlarge,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: theme.spacing.md,
    ...theme.shadows.large
  },
  logoText: {
    fontSize: theme.fontSizes.huge,
    fontWeight: 'bold',
    color: '#000',
    letterSpacing: 4
  },
  subtitle: {
    fontSize: theme.fontSizes.medium,
    color: theme.colors.primary,
    letterSpacing: 2
  },
  formContainer: {
    borderRadius: theme.borderRadius.large,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: theme.colors.border
  },
  form: {
    padding: theme.spacing.xl
  },
  title: {
    fontSize: theme.fontSizes.xxlarge,
    color: theme.colors.text,
    fontWeight: 'bold',
    marginBottom: theme.spacing.xl,
    textAlign: 'center',
    letterSpacing: 2
  },
  inputContainer: {
    marginBottom: theme.spacing.md,
    borderWidth: 1,
    borderColor: theme.colors.border,
    borderRadius: theme.borderRadius.medium,
    backgroundColor: theme.colors.glass
  },
  input: {
    padding: theme.spacing.md,
    fontSize: theme.fontSizes.large,
    color: theme.colors.text
  },
  button: {
    marginTop: theme.spacing.lg,
    borderRadius: theme.borderRadius.medium,
    overflow: 'hidden',
    ...theme.shadows.medium
  },
  buttonDisabled: {
    opacity: 0.6
  },
  buttonGradient: {
    padding: theme.spacing.md,
    alignItems: 'center'
  },
  buttonText: {
    fontSize: theme.fontSizes.large,
    fontWeight: 'bold',
    color: '#000',
    letterSpacing: 1
  },
  registerLink: {
    marginTop: theme.spacing.lg,
    alignItems: 'center'
  },
  registerText: {
    color: theme.colors.primary,
    fontSize: theme.fontSizes.medium
  },
  decorLine: {
    position: 'absolute',
    height: 2,
    width: 100,
    backgroundColor: theme.colors.primary,
    top: '20%',
    left: theme.spacing.lg,
    opacity: 0.3
  },
  decorLine2: {
    top: '80%',
    left: 'auto',
    right: theme.spacing.lg,
    width: 80
  }
});

export default LoginScreen;
